﻿<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles/ng-grid.min.css" />
        <link rel="stylesheet" type="text/css" href="styles/styles.css" />
        <script src="scripts/jquery-2.1.3.min.js"></script>
        <script src="scripts/jquery.signalR-2.2.0.min.js"></script>
        <script src="scripts/angular.min.js"></script>
        <script src="scripts/ng-grid-2.0.12.min.js"></script>
        <script src="scripts/controllers.js"></script>
        <title>Process Monitoring</title>
    </head>

    <body ng-app="topProcessApp" ng-controller="MainController">
        <div class="mainContent">
            <h1 class="center">System Monitor</h1>
            <hr/>

            <div ng-show="loading">
                Loading process info...
            </div>

            <div ng-show="error">
                {{error}}
            </div>

            <div ng-show="notification" class="notification">
                <div style="float: right">
                    <a href="#" ng-click="dismissNotification()" class="closeButton">x</a>
                </div>
                <div style="margin-right: 20px">
                    {{notification}}
                </div>
            </div>

            <div ng-show="!loading && !error">
                <div>
                    Machine name: <b>{{systemInfo.ServerName}}</b><br/>
                    <div style="float: right">
                        <input type="checkbox" ng-model="autoRefresh" id="autoRefreshCheck" />
                        <label for="autoRefreshCheck">Auto update</label>
                    </div>
                    CPU Load: <b>{{(systemInfo.CpuUsage*100).toFixed(0)}}% </b><br />
                    Memory: <b>{{(systemInfo.MemoryUsed/1024/1024).toFixed(1)}} GB</b> used of <b>{{(systemInfo.MemoryTotal/1024/1024).toFixed(1)}} GB</b> total
                </div>
                <p>
                    <div ng-grid="processesGrid" class="processesGrid"></div>
                </p>
            </div>
        </div>
    </body>
</html>
